<template>
  <el-dialog title="添加学校层级信息" :visible.sync="isBatchAdd" width="40%" :before-close="handleClose" :close-on-click-modal='false'>
    <el-row class="phase">
      <el-col :span="18" :offset="3"><el-progress :percentage="this.percentage" :show-text="false"></el-progress></el-col>
    </el-row>
    <el-row class="phaseBox">
      <el-col :span="6" :offset="3">
        <div class="roundBox round1">
          <div :class="this.roundList.round1">
            <i class="el-icon-check"></i>
          </div>
          <p>学校信息</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="roundBox round2">
          <div :class="this.roundList.round2">
            <i class="el-icon-check"></i>
          </div>
          <p>班级数量</p>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="roundBox round3">
          <div :class="this.roundList.round3">
            <i class="el-icon-check"></i>
          </div>
          <p>完成配置</p>
        </div>
      </el-col>
    </el-row>
    <div v-if="this.percentage == 25">
      <el-form label-position="right" label-width="80px" :model="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="名称">
              <el-input v-model="form.name" :disabled="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属区域">
              <el-cascader :options="area" v-model="form.area" :props="{value:'id',label:'name',children:'child'}" :disabled="true"> </el-cascader>
            </el-form-item>
          </el-col>
          <el-row>
            <el-col :span="6">
              <el-form-item label="包含学段">
                <el-checkbox v-model="form.primarySchoolChecked">小学</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="10" v-if="this.form.primarySchoolChecked===false">
              <el-select v-model="form.primarySchool" placeholder="请选择" :disabled="true">
                <el-option v-for="item in this.options1" :key="item.id" :label="item.title" :value="item.id"> </el-option>
              </el-select>
            </el-col>
            <el-col :span="10" v-else>
              <el-select v-model="form.primarySchool" placeholder="请选择">
                <el-option v-for="item in this.options1" :key="item.id" :label="item.title" :value="item.id"> </el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="">
                <el-checkbox v-model="form.juniorHighSchoolChecked">初中</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="10" v-if="form.juniorHighSchoolChecked===false">
              <el-select v-model="form.juniorHighSchool" placeholder="请选择" :disabled="true">
                <el-option v-for="item in this.options2" :key="item.id" :label="item.title" :value="item.id"> </el-option>
              </el-select>
            </el-col>
            <el-col :span="10" v-else>
              <el-select v-model="form.juniorHighSchool" placeholder="请选择">
                <el-option v-for="item in this.options2" :key="item.id" :label="item.title" :value="item.id"> </el-option>
              </el-select>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label="">
                <el-checkbox v-model="form.highSchoolChecked">高中</el-checkbox>
              </el-form-item>
            </el-col>
            <el-col :span="10" v-if="form.highSchoolChecked===false">
              <el-select v-model="form.highSchool" placeholder="请选择" :disabled="true">
                <el-option v-for="item in this.options3" :key="item.id" :label="item.title" :value="item.id"> </el-option>
              </el-select>
            </el-col>
            <el-col :span="10" v-else>
               <el-select v-model="form.highSchool" placeholder="请选择">
                <el-option v-for="item in this.options3" :key="item.id" :label="item.title" :value="item.id"> </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-row>
      </el-form>
    </div>
    <div v-if="this.percentage == 75">
      <p class="secondary">根据学校包含的字段，自动生成学校层级，需要填写相应的班级数量。自动生成后，可编辑修改。</p>
      <div v-for="item in this.dataList" :key="item.section_id">
        <el-col :span="24" class="dataListTitle">
          <p><i class="el-icon-office-building"></i>{{item.section_title}}</p>
          <el-row v-for="n in item.grade_list" :key="n.year" class="dataListBox">
            <el-col :span="8" :offset="2">
              {{n.grade_name}}（{{n.year}}级）共有
            </el-col>
            <el-col :span="5"><el-input size="mini" v-model="n.class_number" type="number"></el-input></el-col>
            <el-col :span="6" :offset="1">班</el-col>
          </el-row>
        </el-col>
      </div>
    </div>
    <span v-if="this.percentage == 25" slot="footer" class="dialog-footer">
      <el-button @click="close()">取 消</el-button>
      <el-button type="primary" @click="nextFn()">下一步</el-button>
    </span>
    <span v-if="this.percentage == 75" slot="footer" class="dialog-footer">
      <el-button @click="onFn()">上一步</el-button>
      <el-button type="primary" @click="checkFn()">提 交</el-button>
    </span>
    <!-- {{row}} -->
  </el-dialog>
</template>
<script>
import {APILEARNINGPERIOD, APIPLACE, APIGETSYSGRADELIST, APIBATCHADDLEVEL} from '@/common/api.js'
export default {
  props: ['isBatchAdd', 'row'],
  data () {
    return {
      form: {
        name: '',
        area: [],
        primarySchoolChecked: false,
        juniorHighSchoolChecked: false,
        highSchoolChecked: false,
        primarySchool: '',
        juniorHighSchool: '',
        highSchool: ''
      },
      percentage: 25,
      roundList: {
        round1: 'round onRound',
        round2: 'round',
        round3: 'round'
      },
      options: [],
      options1: [],
      options2: [],
      options3: [],
      area: [],
      dataList: []
    }
  },
  created () {
    this.learningPeriod()
    this.form.name = this.row.title
  },
  methods: {
    learningPeriod () {
      APILEARNINGPERIOD().then((res) => {
        if (res.status === 1) {
          this.options = res.data
          res.data.forEach(item => {
            if (item.title === '小学段') {
              this.options1 = item.sub_list
            }
            if (item.title === '初中段') {
              this.options2 = item.sub_list
            }
            if (item.title === '高中段') {
              this.options3 = item.sub_list
            }
          })
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
      APIPLACE().then((res) => {
        if (res.status === 1) {
          this.area = res.data
          this.form.area.push(this.row.province)
          this.form.area.push(this.row.city)
          this.form.area.push(this.row.area)
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    handleClose () {
      this.$emit('noBatchAdd')
    },
    close (type) {
      this.$emit('noBatchAdd', type)
    },
    onFn () {
      this.percentage = 25
    },
    nextFn () {
      let arr = []
      if (this.form.primarySchoolChecked === true) {
        var id1 = null
        this.options.forEach(item => {
          if (item.title === '小学段') {
            id1 = item.id
          }
        })
        arr.push({
          'section_id': id1,
          'school_system_id': this.form.primarySchool
        })
      }
      if (this.form.juniorHighSchoolChecked === true) {
        var id2 = null
        this.options.forEach(item => {
          if (item.title === '初中段') {
            id2 = item.id
          }
        })
        arr.push({
          'section_id': id2,
          'school_system_id': this.form.juniorHighSchool
        })
      }
      if (this.form.highSchoolChecked === true) {
        var id3 = null
        this.options.forEach(item => {
          if (item.title === '高中段') {
            id3 = item.id
          }
        })
        arr.push({
          'section_id': id3,
          'school_system_id': this.form.highSchool
        })
      }
      arr = JSON.stringify(arr)
      APIGETSYSGRADELIST({
        section: arr
      }).then((res) => {
        if (res.status === 1) {
          this.percentage = 75
          this.roundList.round2 = 'round onRound'
          this.dataList = res.data
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    },
    checkFn () {
      this.dataList.forEach(item => {
        item.grade_list.forEach(n => {
          if (n.class_number === '') {
            this.$message.warning('班级数量不能为空')
            return false
          }
        })
      })
      this.submit()
    },
    submit () { // 提交
      APIBATCHADDLEVEL({
        level_result: JSON.stringify(this.dataList)
      }).then((res) => {
        if (res.status === 1) {
          this.$message.success(res.msg)
          this.close(1)
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err.msg)
      })
    }
  }
}
</script>
<style scoped lang="scss">
@import 'src/assets/style/varibles.scss';
.phase{
  height: 7vw;
  padding: 3vw 0 5vw 0;
}
.phaseBox{
  position: relative;
}
.roundBox{
  width: 4vw;
  height: 4.5vw;
  text-align: center;
  // background-color: red;
  position: absolute;
  top: -7vw;
  .round{
    width: 4vw;
    height: 4vw;
    border-radius: 4vw;
    line-height: 4vw;
    background-color: $roundColor;
    text-align: center;
    color: #ffffff;
    font-size: 30px;
  }
  p{
    margin-top: 0.2vw;
  }
}
.onRound{
  background-color: $mainColor !important;
}
.round1{
  left: 2vw;
}
.round2{
  left: 17vw;
}
.round3{
  left: 31vw;
}
.dataListTitle{
  margin: 10px 0;
  p{
    font-weight: 700;
  }
}
.dataListBox{
  margin: 10px 0;
}
.secondary{
  color: $secondaryFontColor;
}
</style>
